<template>
  <div class="payment_account_detail">
    <div class="detail-table">
      <Row>
        <Col span="24" class="detail-table__col detail-table__title">
          商户账号详情
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">编号：</span>
          <span class="detail-table__content--3">{{ formValidate.accountNo }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">名称：</span>
          <span class="detail-table__content--3">{{ formValidate.accountName }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">商户名称：</span>
          <span class="detail-table__content--5">{{ formValidate.merchantName }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">法人代表：</span>
          <span class="detail-table__content--5">{{ formValidate.legalPerson }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">账号类型：</span>
          <span class="detail-table__content--5">{{ getEnumsName(formValidate.bankAccountType, accountTypes) }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">开户银行：</span>
          <span class="detail-table__content--5">{{ formValidate.settlementBank }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--6">开户行名称：</span>
          <span class="detail-table__content--6">{{ formValidate.bankName }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">银行卡号：</span>
          <span class="detail-table__content--5">{{ formValidate.cardNo }}</span>
        </Col>
      </Row>
      <!-- 银联 -->
      <template v-if="formValidate.providerCode === 'cmb'">
        <Row>
          <Col span="24" class="detail-table__col">
            <span class="detail-table__label--6">支付服务商：</span>
            <span class="detail-table__content--6">{{ formValidate.providerName }}</span>
          </Col>
        </Row>
        <div v-for="(item, index) in formCmbs" :key="index">
          <Row class="no-bottom-border">
            <Col span="12" class="detail-table__col no-right-border">
              <span class="detail-table__label--5">应用名称：</span>
              <span class="detail-table__content--5">{{ item.appName }}</span>
            </Col>
            <Col span="12" class="detail-table__col">
              <span class="detail-table__label--5">应用编号：</span>
              <span class="detail-table__content--5">{{ item.appId }}</span>
            </Col>
          </Row>
          <Row class="no-bottom-border">
            <Col span="12" class="detail-table__col  no-right-border">
              <span class="detail-table__label--5">应用场景：</span>
              <span class="detail-table__content--5">{{ getEnumsName('' + item.channelType, cmbPayPassages) }}</span>
            </Col>
            <Col v-if="item.channelType === 9" span="12" class="detail-table__col">
              <span class="detail-table__label--5">商户私钥：</span>
              <span class="detail-table__content--5">{{ item.privateKey }}</span>
            </Col>
            <Col v-if="item.channelType !== 9" span="12" class="detail-table__col">
              <span class="detail-table__label--5">应用秘钥：</span>
              <span class="detail-table__content--5">{{ item.appKey }}</span>
            </Col>
          </Row>
          <Row v-if="item.channelType === 9" class="no-bottom-border">
            <Col span="12" class="detail-table__col  no-right-border">
              <span class="detail-table__label--5">商户公钥：</span>
              <span class="detail-table__content--5">{{ item.publicKey }}</span>
            </Col>
            <Col span="12" class="detail-table__col">
              <span class="detail-table__label--5">招商公钥：</span>
              <span class="detail-table__content--5">{{ item.cmbPublicKey }}</span>
            </Col>
          </Row>
          <Row>
            <template v-if="item.channelType != 3 && item.channelType != 5">
              <Col span="24" class="detail-table__col">
                <span class="detail-table__label--5">签名方式：</span>
                <span class="detail-table__content--5">{{ item.signType }}</span>
              </Col>
            </template>
            <template v-else>
              <Col span="12" class="detail-table__col no-right-border">
                <span class="detail-table__label--5">签名方式：</span>
                <span class="detail-table__content--5">{{ item.signType }}</span>
              </Col>
              <Col span="12" class="detail-table__col">
                <span class="detail-table__label--5">APP ID：</span>
                <span class="detail-table__content--5">{{ item.subAppId }}</span>
              </Col>
            </template>
          </Row>
        </div>
      </template>
      <!-- 银联 -->
      <!-- 微信 -->
      <template v-else-if="formValidate.providerCode === 'weixin'">
        <Row>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--6">支付服务商：</span>
            <span class="detail-table__content--6">{{ formValidate.providerName }}</span>
          </Col>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--5">商户账号：</span>
            <span class="detail-table__content--5">{{ formWexin.mchId }}</span>
          </Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--5">APP ID：</span>
            <span class="detail-table__content--5">{{ formWexin.appId }}</span>
          </Col>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--6">公众号名称：</span>
            <span class="detail-table__content--6">{{ formWexin.appName }}</span>
          </Col>
        </Row>
        <Row>
          <Col span="24" class="detail-table__col">
            <span class="detail-table__label--8">小程序APP ID：</span>
            <span class="detail-table__content--8">{{ formWexin.miniProgramId }}</span>
          </Col>
        </Row>
        <Row>
          <template v-if="formWexin.subMchId">
            <Col span="12" class="detail-table__col">
              <span class="detail-table__label--5">支付秘钥：</span>
              <span class="detail-table__content--5">{{ formWexin.payPartnerKey }}</span>
            </Col>
            <Col span="12" class="detail-table__col">
              <span class="detail-table__label--6">子商户账号：</span>
              <span class="detail-table__content--6">{{ formWexin.subMchId }}</span>
            </Col>
          </template>
          <template v-else>
            <Col span="24" class="detail-table__col">
              <span class="detail-table__label--5">支付秘钥：</span>
              <span class="detail-table__content--5">{{ formWexin.payPartnerKey }}</span>
            </Col>
          </template>
        </Row>
      </template>
      <!-- 微信 -->
      <!-- 支付宝 -->
      <template v-else>
        <Row>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--6">支付服务商：</span>
            <span class="detail-table__content--6">{{ formValidate.providerName }}</span>
          </Col>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--7">支付宝应用ID：</span>
            <span class="detail-table__content--7">{{ formAlipay.appId }}</span>
          </Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--8">合作伙伴身份ID：</span>
            <span class="detail-table__content--8">{{ formAlipay.alipayPid }}</span>
          </Col>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--5">商户私钥：</span>
            <span class="detail-table__content--5">{{ formAlipay.privateKey }}</span>
          </Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--5">商户公钥：</span>
            <span class="detail-table__content--5">{{ formAlipay.publicKey }}</span>
          </Col>
          <Col span="12" class="detail-table__col">
            <span class="detail-table__label--6">支付宝公钥：</span>
            <span class="detail-table__content--6">{{ formAlipay.alipayPublickey }}</span>
          </Col>
        </Row>
        <Row>
          <Col span="24" class="detail-table__col">
            <span class="detail-table__label--5">签名方式：</span>
            <span class="detail-table__content--5">{{ formAlipay.signType }}</span>
          </Col>
        </Row>
      </template>
      <!-- 支付宝 -->
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">创建时间：</span>
          <span class="detail-table__content--5">{{ formValidate.createdAt }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">修改时间：</span>
          <span class="detail-table__content--5">{{ formValidate.updatedAt }}</span>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getAccountDetail } from '@/api/pay/account.js'
import passageMixins from '../mixins/payPassage'
import accountTypeMixins from '../mixins/accountType'
export default {
  name: 'payment_account_detail',
  mixins: [accountTypeMixins, passageMixins],
  data () {
    return {
      formValidate: {},
      formWexin: {},
      formAlipay: {},
      formCmbs: []
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      this.id = this.$route.params.id
      if (this.id) {
        getAccountDetail({
          paymentAccountId: this.id,
          merchantId: this.merchantId
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            const form = result.data || {}
            this.formValidate = form
            const accountExtraList = form.accountExtraList || []
            const detail = accountExtraList[0] || {}
            switch (form.providerCode) {
              case 'weixin':
                this.formWexin = detail
                break
              case 'alipay':
                this.formAlipay = detail
                break
              default:
                this.formCmbs = accountExtraList
            }
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      }
    },
    getEnumsName (value, enums) {
      const result = enums.filter(item => item.value === value)
      return result[0] ? result[0].label : ''
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
.payment_account_detail {
  padding: 40px 80px
}
</style>
